<template>

    <div>

        <div class="row">
            <div class="col-md-6">
                <p>
                    <button @click="all" class="btn btn-white btn-default btn-round">
                        <i class="ace-icon fa fa-refresh green"></i>
                        刷新
                    </button>
                    &nbsp;
                    <button @click="add1" class="btn btn-white btn-default btn-round">
                        <i class="ace-icon fa fa-edit red"></i>
                        新增
                    </button>
                </p>
                <table id="level1-table" class="table  table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>名称</th>
                        <th>排序</th>
                        <th>操作</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr v-for="category in level1" @click="onClickLevel1(category)" v-bind:class="{'active' : category.id === active.id}">
                        <td>{{category.id}}</td>
                        <td>{{category.name}}</td>
                        <td>{{category.sort}}</td>

                        <td>
                            <div class="hidden-sm hidden-xs btn-group">


                                <button @click="edit(category)" class="btn btn-sm btn-white btn-info">
                                    <i class="ace-icon fa fa-pencil bigger-120"></i>编辑
                                </button>

                                <button @click="handledelete(category.id)" class="btn btn-sm btn-white btn-danger">
                                    <i class="ace-icon fa fa-trash-o bigger-120"></i>删除
                                </button>

                            </div>

                            <div class="hidden-md hidden-lg">
                                <div class="inline pos-rel">
                                    <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown"
                                            data-position="auto">
                                        <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                    </button>

                                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">

                                        <li>
                                            <a @click="edit(category)" class="tooltip-success" data-rel="tooltip" title="编辑">
																			<span class="green">
																				<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
																			</span>
                                            </a>
                                        </li>

                                        <li>
                                            <a @click="handledelete(category.id)" class="tooltip-error" data-rel="tooltip" title="删除">
																			<span class="red">
																				<i class="ace-icon fa fa-trash-o bigger-120"></i>
																			</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="col-md-6">
                <p>
                    &nbsp;
                    <button @click="add2" class="btn btn-white btn-default btn-round">
                        <i class="ace-icon fa fa-edit red"></i>
                        新增
                    </button>
                </p>
                <table id="level2-table" class="table  table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>名称</th>
                        <th>排序</th>
                        <th>操作</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr v-for="category in level2" >
                        <td>{{category.id}}</td>
                        <td>{{category.name}}</td>
                        <td>{{category.sort}}</td>

                        <td>
                            <div class="hidden-sm hidden-xs btn-group">

                                <button @click="edit(category)" class="btn btn-sm btn-white btn-info">
                                    <i class="ace-icon fa fa-pencil bigger-120"></i>编辑
                                </button>

                                <button @click="handledelete(category.id)" class="btn btn-sm btn-white btn-danger">
                                    <i class="ace-icon fa fa-trash-o bigger-120"></i>删除
                                </button>

                            </div>

                            <div class="hidden-md hidden-lg">
                                <div class="inline pos-rel">
                                    <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown"
                                            data-position="auto">
                                        <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                    </button>

                                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">

                                        <li>
                                            <a @click="edit(category)" class="tooltip-success" data-rel="tooltip" title="编辑">
																			<span class="green">
																				<i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
																			</span>
                                            </a>
                                        </li>

                                        <li>
                                            <a @click="handledelete(category.id)" class="tooltip-error" data-rel="tooltip" title="删除">
																			<span class="red">
																				<i class="ace-icon fa fa-trash-o bigger-120"></i>
																			</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>


        <!-- /.span -->

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">表单</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">

                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">父分类:</label>
                                                <div class="col-sm-10">
                                                    <p class="form-control-static">{{active.name || '无'}}</p>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">名称:</label>
                                                <div class="col-sm-10">
                                                    <input type="text" v-model="categoryinfo.name" class="form-control" placeholder="名称">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">排序:</label>
                                                <div class="col-sm-10">
                                                    <input type="text" v-model="categoryinfo.sort" class="form-control" placeholder="排序">
                                                </div>
                                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" @click="save" class="btn btn-primary">保存</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->


    </div><!-- /.row -->


</template>


<script scope>
    import axios from 'axios';
    import {defineComponent, onMounted, ref} from 'vue';

    export default defineComponent({
        name: 'category',
        components:{
        },
        setup() {
            const categorys = ref();
            const categoryinfo=ref({});
            //一级分类
            let level1=ref([]);
            //二级分类
            let level2=ref([]);
            //默认id赋值0,否则上面的v-bind:class active.id 会没有值而报错.
            let active=ref({
                id: 0,
            });

            const all = () => {
                Loading.show();
                axios.get("/business/admin/category/all").then((response) => {
                    Loading.hide();
                    const data=response.data;
                    if (data.success){
                        categorys.value = data.content;
                        //将所有记录格式化成树形结构
                        level1.value=[];
                        for (let i=0;i< categorys.value.length;i++){
                            let c= categorys.value[i];
                            // console.log(c.parent);
                            if(c.parent === '0'){
                                level1.value.push(c);
                                for (let j=0;j<categorys.value.length;j++){
                                    let child= categorys.value[j];
                                    if(child.parent === c.id){
                                        //如果没有这个字段，则初始化这个字段
                                        if(Tool.isEmpty(c.children)){
                                            c.children=[];
                                        }
                                        c.children.push(child);
                                    }
                                }
                            }
                        }

                        level2.value=[];
                        //对当前一级分类中选择的表格触发一次点击事件，以刷新二级菜单列表
                        //注意：界面的渲染需要等vue绑定好变量后才做，所以加延时100ms
                        setTimeout(function () {
                        $("tr.active").trigger("click");
                        },100);
                    }else {
                        Loading.hide();
                        Toast.warning(data.message);
                    }

                })
            };
            /*
            * 新增一级分类
            * */
            const add1=()=>{
                active.value={};
                level2.value=[];
                categoryinfo.value={
                    parent: '0'
                };
                $('#myModal').modal();
            };

            /*
            * 新增二级分类
            * */
            const add2=()=>{
                if (Tool.isEmpty(active.value.name)){
                    Toast.warning("请先点击一级分类");
                    return;
                }

                categoryinfo.value={
                    parent: active.value.id
                };
                $('#myModal').modal();
            };

            /**
             * 编辑
             */
            const edit = (category) => {
                $('#myModal').modal();
                categoryinfo.value = Tool.copy(category);
            };

            /**
             * 删除
             */
            const handledelete = (id) => {
                Confirm.show("删除分类后不可恢复，确认删除？", function () {
                    Loading.show();
                    axios.delete("/business/admin/category/delete/" + id).then((response) => {
                        Loading.hide();
                        const data = response.data;
                        if (data.success) {
                            all();
                            Toast.success("删除成功!");
                        }else{
                            Loading.hide();
                            Toast.warning(data.message);
                        }
                    })
                });
            };

            const save=()=>{
                // 保存校验
                if (1 != 1
                    || !Validator.require(categoryinfo.value.name, "名称")
                    || !Validator.length(categoryinfo.value.name, "名称", 1, 50)
                ) {
                    return;
                }

                Loading.show();
                axios.post("/business/admin/category/save",categoryinfo.value).then((response) => {
                    const data=response.data;
                    if (data.success){
                        Loading.hide();
                        $('#myModal').modal('hide');
                        // console.log(data);
                        all();
                        Toast.success("保存成功！");
                    }else{
                        Loading.hide();
                        Toast.warning(data.message);
                    }

                })
            };

            const onClickLevel1=(category)=>{
                //为样式的值赋值
                active.value=category;
                //为level2赋值
                level2.value=category.children;

            }


            onMounted(() => {
                all();
            });

            return {
                all,
                add1,
                add2,
                edit,
                handledelete,
                categoryinfo,
                save,
                categorys,
                level1,
                level2,
                onClickLevel1,
                active
            }


        }
    });
</script>

<style scoped>
    .active td{
        background-color: #d6e9c6 !important;
    }
</style>